@extends("admin.layout.main")
@section("content")
    <div id="app" >
        {{--按钮栏--}}
        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">
                <span>
                    &nbsp;&nbsp;标题:
                   <i-input style="width: 200px" v-model="search.title"></i-input>
                </span>

                <span>
                    &nbsp;&nbsp;作者:
                   <i-input style="width: 200px" v-model="search.author"></i-input>
                </span>


                <span>
                    开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 120px"
                    @on-change="dateStartFormat">
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 120px"
                    @on-change="dateEndFormat">
                    </date-picker>
                </span>


                <span>
                    <i-button type="primary" @click="getData(1)">查询</i-button>
                </span>

                <span>
                    <a :href="loadLink" style="margin-left: 15px;font-weight: bold">导出</a>
                </span>

            </i-col>
        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table  :data="tableData" :columns="tableColumns" stripe
                          style="width: 100% !important;"  >
                </i-table>
            </i-col>
        </Row>
        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getData">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    search:{
                        title:'',
                        author:''
                    },
                    token:'',
                    defaultStartTime:'',
                    defaultEndTime:'',
                    tableData:[],
                    page:{
                        total:0,
                        current:1,
                        pageSize:30
                    },
                    spinShow:false,
                    tableColumns: [
                        {
                            title: '标题',
                            key:'title',
                        },
                        {
                            title: '链接',
                            key:'article_url'
                        },
                        {
                            title: '作者',
                            key:'author',
                        },

                        {
                            title: '发布日期',
                            key:'pub_date'

                        }

                    ],
                };
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                dateStartFormat(f,v){   //时间控件
                    this.defaultStartTime = f;
                },
                dateEndFormat(f,v){ //时间控件
                    this.defaultEndTime = f;
                },
                getData (page = 1) {
                    this.spinShow = true;
                    axios.get("/admin/media/qingyun/data", {
                        params: {
                            token:vm.token,
                            title: this.search.title,
                            author: this.search.author,
                            start_time:this.defaultStartTime,
                            end_time:this.defaultEndTime,
                            page:page
                        }
                    })
                        .then(function (response) {
                            result = response.data.result;
                            vm.tableData = result.data;
                            vm.page.total = result.total;
                            vm.page.current = result.current_page;
                            vm.spinShow = false;
                        })
                        .catch(function (error) {
                            vm.$Message.error('服务器异常');
                        });
                }
            },
            computed:{
                loadLink:function(){
                    return '/admin/media/qingyun/export?start_time='+this.defaultStartTime+'&end_time='+this.defaultEndTime+'&title='+this.search.title+'&author='+this.search.author+'&token='+this.token;
                }
            }


        });
        vm.getData()
    </script>
@endsection